import { map, keys } from "lodash";
import React from "react";
import { useDebouncedCallback } from "use-debounce";
import PropTypes from "prop-types";
import * as Grid from "antd/lib/grid";
import { Section, Select, Input, Checkbox, TextAlignmentSelect, InputNumber, ContextHelp } from "@/components/visualizations/editor";

import ColumnTypes from "../columns";

export default function ColumnEditor({ column, onChange, query }) {
  function handleChange(changes) {
    onChange({ ...column, ...changes });
  }

  const [handleChangeDebounced] = useDebouncedCallback(handleChange, 200);

  const AdditionalOptions = ColumnTypes[column.displayAs].Editor || null;

  return (
    <div className="table-visualization-editor-column">
      <Section>
        <Grid.Row gutter={15} type="flex" align="middle">
          <Grid.Col span={12}>
            <Input
              label="标题"
              defaultValue={column.title}
              title="支持HTML5语法"
              onChange={event => handleChange({ title: event.target.value })}
            />
          </Grid.Col>
          <Grid.Col span={8}>
            <TextAlignmentSelect
              label="对齐方式"
              data-test={`Table.Column.${column.name}.TextAlignment`}
              defaultValue={column.alignContent || 'right'}
              onChange={event => handleChange({ alignContent: event.target.value })}
            />
          </Grid.Col>
          <Grid.Col span={4}>
          <InputNumber
            label={
              <React.Fragment>
                宽度
                <ContextHelp.ColsFormatSpecs />
              </React.Fragment>
            }
            min="0"
            max="24"
            defaultValue={column.titleCols || 3}
            title="24列系统中宽度"
            onChange={value => handleChange({ titleCols: value })}
          />
          </Grid.Col>
        </Grid.Row>
      </Section>

      <Section>
        <Grid.Row gutter={15} type="flex" align="middle">
          <Grid.Col span={20}>
            <Input
              label="描述"
              defaultValue={column.description}
              title="后置描述，支持HTML5语法"
              onChange={event => handleChange({ description: event.target.value })}
            />
          </Grid.Col>
          <Grid.Col span={4}>
          <InputNumber
            label={
              <React.Fragment>
                宽度
                <ContextHelp.ColsFormatSpecs />
              </React.Fragment>
            }
            min="0"
            max="24"
            defaultValue={column.descriptionCols}
            title="24列系统中宽度"
            onChange={value => handleChange({ descriptionCols: value })}
          />
          </Grid.Col>
        </Grid.Row>
      </Section>

      <Section>
        <Checkbox
          defaultChecked={column.is_notnull}
          disabled={column.displayAs==='hidden'}
          onChange={event => handleChange({ is_notnull: event.target.checked })}>
          必填
        </Checkbox>
        <Checkbox
          defaultChecked={column.is_disable}
          onChange={event => handleChange({ is_disable: event.target.checked })}>
          置灰（不可用）
        </Checkbox>
      </Section>

      <Section>
        <Grid.Row gutter={15} type="flex" align="middle">
          <Grid.Col span={20}>
            <Select
              label="显示格式"
              data-test={`Table.Column.${column.name}.DisplayAs`}
              defaultValue={column.displayAs}
              onChange={displayAs => handleChange({ displayAs })}>
              {map(ColumnTypes, ({ friendlyName }, key) => (
                <Select.Option key={key} data-test={`Table.Column.${column.name}.DisplayAs.${key}`}>
                  {friendlyName}
                </Select.Option>
              ))}
            </Select>
          </Grid.Col>
          <Grid.Col span={4}>
          <InputNumber
            label={
              <React.Fragment>
                宽度
                <ContextHelp.ColsFormatSpecs />
              </React.Fragment>
            }
            min="0"
            max="24"
            defaultValue={column.contentCols || 9}
            title="24列系统中宽度"
            onChange={value => handleChange({ contentCols: value })}
          />
          </Grid.Col>
        </Grid.Row>
      </Section>

      {AdditionalOptions && <AdditionalOptions query={query} column={column} onChange={handleChange} />}

    </div>
  );
}

ColumnEditor.propTypes = {
  column: PropTypes.shape({
    name: PropTypes.string.isRequired,
    title: PropTypes.string,
    visible: PropTypes.bool,
    alignContent: PropTypes.oneOf(["left", "center", "right"]),
    displayAs: PropTypes.oneOf(keys(ColumnTypes)),
  }).isRequired,
  onChange: PropTypes.func,
};

ColumnEditor.defaultProps = {
  onChange: () => {},
};
